<template>
<div>
  <section class="content" >
    <div class="column">
      
      
      <div id="myChart" ></div>
  
      <div id="line"  ></div>
      <div id="pie"  ></div>
    </div>
    <div class="column">   
     
      <div id="scatter"  ></div>
      <div id="rose" ></div>
      <div id="hot"></div>
    </div> 
    

  </section>

</div>
  
</template>

<script>
// import { defineComponent } from '@vue/composition-api'
import * as echarts from 'echarts';

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
      // testList:[]
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
      
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'));
        // 绘制图表
        myChart.setOption({
            title: { text: '柱状图 ' },
            tooltip: {
              // extraCssText: 'width: 50px;',//提示框style样式
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              } 
            },
            grid:[ //坐标系调整
              {bottom:'10%'},//从底部收缩10%
						// {height:60,
						// bottom:0}
            ],
            xAxis: [{
                data: ["衬衫\n副商品a","羊毛衫\n副商品a","雪纺衫\n副商品a","裤子\n副商品a","高跟鞋\n副商品a","袜子\n副商品a"],
                type:'category',
                name:'x轴标签'
            },
            {
              data: ["a","b","c","d","f","e"],
              type:'category',
              // name:'x轴上轴'
            }
            ],
            yAxis: [{
              type:'value',
              name:'轴标签a'
            },{
              type:'value',
              name:'轴标签b'
            }],
            series: [{
                // name: '',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            },
            {
              // name:'',
              type: 'bar',
              data: [3, 45, 12, 13, 10, 20]
            }
            ]
        });



        let linePic = echarts.init(document.getElementById('line'));
        linePic.setOption({
          title: { text: '折线图' },
            tooltip: { 
              // extraCssText: 'width: 170px;height:100px;',
              trigger: "axis"
            },
            grid:{},
            xAxis: [{
                data: ["衬衫  副商品a","羊毛衫  副商品a","雪纺衫   副商品a","裤子  副商品a","高跟鞋  副商品a","袜子  副商品a"],
                type:'category',
                name:'x轴标签'
            },
            {
              data: ["a","b","c","d","f","e"],
              type:'category',
              name:'\n\nx轴标签2'
            }
            ],
            yAxis: [{
              type:'value',
              name:'轴标签a'
            },{
              type:'value',
              name:'轴标签b'
            }],
            series: [{
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            },{
              type: 'line',
              data: [3, 45, 12, 13, 10, 20]
            }]
        });



        let piePic = echarts.init(document.getElementById('pie'));
        piePic.setOption({
          title: { text: '饼图' },
            tooltip: {},
            grid:{},
            series: [{
                name: '销量',
                type: 'pie',
                roseType: 'radius',//南丁格尔图
                // radius:['50%','75%'] ,//双半径
                data: [
                  // { value:50,name:'aa'},
                  { value: 735, name: 'Direct' },
                  { value: 580, name: 'Email' },
                  { value: 484, name: 'Union Ads' },
                  { value: 300, name: 'Video Ads' }
                ]
            }]
        });
        
        let scaPic = echarts.init(document.getElementById('scatter'));
        scaPic.setOption({
          title: { text: '散点' },
          legend: {},
          tooltip: {
              trigger: "axis",
              axisPointer: {
                      type: "shadow"
                  },
              extraCssText: 'width: 170px'
          },
          tooltip: {},
          
          dataset:{
            source: [{value:16,value2:30},{value:23,value2:49},{value:40,value2:48},{value:12,value2:35},{value:45,value2:12},{value:28,value2:38}]
          },
          grid:{},
          xAxis:{
            type:'value',
            scale:true
          },

          yAxis:{
              type:'value',
              scale:true
          },
          series:[
              {
                  type:'scatter'
              }
          ]
        });
        
        let bubblePic = echarts.init(document.getElementById('rose'));
        bubblePic.setOption({
            title: { text: '气泡图' },
            tooltip: {},
            grid:{},
            dataset:{
              source:[{value:16,value2:30,size:10},{value:23,value2:49,size:4},{value:40,value2:48,size:5},{value:12,value2:35,size:4},{value:45,value2:12,size:8},{value:28,value2:38,size:3}]
            },
            xAxis:
                {
                    type:'value',
                    scale:true
                },

            yAxis:
                {
                    type:'value',
                    scale:true
                },
            series:
                {
                  type:'scatter',
                  symbolSize: function (arg) {
                      // console.log(arg);
                      // arg字典形式
                      
                      var res = arg.size * 5;
                      return res
                  }
                }
        });

        let hotmapPic = echarts.init(document.getElementById('hot'));
        const hours = [  /*小时数据系列*/
            '12a', '1a','2a'
        ];
        const days = [ /*日期系列*/
            'Saturday', 'Friday'
        ];
        hotmapPic.setOption({
          title: { text: '热力图' },
          tooltip: {},
          grid:{},
          dataset:{
            source: [[0,0,5],[0,1,1],[2,0,3],[1, 0, 2],[1,1,1]] //x轴坐标，y轴坐标，z轴坐标
          },
          xAxis: {
          type: 'category',

          data: hours
          },
          yAxis: {
          type: 'category',
          data: days
          },
          visualMap: {
          min: 0,
          max: 10,
          calculable: true,/*显示范围值*/
          left: 'center',/*居中*/
          orient: 'horizontal',/*热力度参考条水平分布*/
          bottom: '-10'/*下边距*/
          },
          series: 
          {
              name: 'Punch Card',
              type: 'heatmap',
              data: [[0,0,5],[0,1,1],[2,0,3],[1, 0, 2],[1,1,1]],
              label: {
              show: true  /*显示数值*/
              }
          }
          })
    },
    
  }
}


</script>
<style >
.column div{
  
  /* width: 100%; */
  height: 500px;
}

.content{

  display: flex;
  /* min-width: 1024px; */
  /* max-width: 1920px; */
  
  margin: 0 auto;
  /* flex-direction: row; */
  
}
.column{
  flex: 2;
    
  }

</style>